<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../src/index.css">
</head>

<body>
    <main id="app"></main>

    <script src="../dist/index.aio.js"></script>
    <script>
        var data = [
            {
                data: "https://nyanpass.com/assets/img/back.jpg?79",
                desc: "单张图片 只传入了一个图片链接"
            },
            {
                data: ["https://nyanpass.com/assets/img/back.jpg?79"],
                desc: "单张图片 传入了一个图片链接数组"
            },
            {
                data: [{
                    "src": "https://nyanpass.com/assets/img/back.jpg?79",
                    "alt": "喵帕斯！"
                }],
                desc: "单张图片 传入了一个图片链接配置了图片名数组"
            },
            {
                data: ["https://nyanpass.com/assets/img/back.jpg?79", {
                    "src": "https://th.bing.com/th/id/R1fdf3a183158c62b91e690d8beee6ebe?rik=mHL6yEiXiMAK9Q&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f200918%2f1-20091Q10417.jpg&ehk=wzkrRqNZfU1InC6bUzefYssPjoFNJBZZ7qSj6P7WHPI%3d&risl=&pid=ImgRaw",
                    "alt": "路"
                }],
                desc: "多张图片"
            },
        ]
        for (var i = 0; i < data.length; i++) {
            templateHtml(i, data[i].desc);
            setText(i);
        }


        document.body.addEventListener("click", (e) => {
            if (e.target.tagName !== "BUTTON") {
                return;
            }

            window.HcPhotos(getText(e.target.dataset.index));
        })

        function setText(index) {
            document.querySelector("#data" + index).value = JSON.stringify(data[index].data);
        }

        function getText(index) {
            try {
                return JSON.parse(document.querySelector("#data" + index).value);
            } catch {
                alert("数据", index + 1, "格式化失败");
            }
        }

        function templateHtml(index, desc) {
            var div = document.createElement("article");
            div.innerHTML = "<h3>" + desc + "</h3>" +
                "<p>数据" + index + "：</p>" +
                "<textarea id='data" + index + "' cols='80' rows='3'></textarea><br />" +
                "<button data-index='" + index + "'>预览图片</button>"
            document.querySelector("#app").appendChild(div);
        }
    </script>
</body>

</html>
